<template>
	<view class="">
		<!-- 第一部分 -->
		<topicInfo :item="item"></topicInfo>
		<divider></divider>

		<!-- 第二部分 -->
		<block v-for="(item, index) in hotlist" :key="index + 100">
			<view class="flex align-center p-2 border-bottom" hover-class="bg-light">
				<text class="iconfont icon-aixin"></text>
				<text class="text-ellipsis">{{ item.title }}</text>
			</view>
		</block>
		<divider></divider>

		<!-- 第三部分 -->
		<view class="flex align-center justify-around">
			<view
				class=""
				v-for="(item, index) in tarberList"
				:key="index"
				@click="changeIndex(index)"
				:class="index === tarberIndex ? 'font-weight-bold font text-main' : 'text-small'"
			>
				{{ item.name }}
			</view>
		</view>

		<template v-if="dataList.length > 0">
			<block v-for="(item, index) in dataList" :key="index + '_' + tarberIndex">
				<list :item="item" :index="index" :userId="userId" :isDetail="true" :isSpace="true"></list>
				<divider></divider>
			</block>
		</template>
		<view v-else-if="isloading1 !== true || isloading2 !== true"></view>
		<template v-else>
			<noThing></noThing>
		</template>

		<!-- 上拉加载更多 -->
		<view v-if="dataList.length > 3">
			<loadmore :loadmore="loadtext"></loadmore>
		</view>
	</view>
</template>

<script>
import topicInfo from '../../compoment/topicDetail/topicInfo.vue';
import list from '../../compoment/IndexCommen/list.vue';
import noThing from '../../compoment/IndexCommen/no-thing.vue';
import { getTopicPostList } from '../../request/Api/topic.js';
export default {
	data() {
		return {
			item: {},
			hotlist: [
				{ title: '【新人必读】uni-app实战第二季商城类app项目实战47384738473847' },
				{
					title: '【新人必读】uni-app实战第二季商城类app项目实战fioehfoihfiehio'
				}
			],
			tarberList: [{ name: '默认' }, { name: '最新' }],
			tarberIndex: 0,
			list1: [],
			list2: [],
			page1: 1,
			page2: 1,
			loadtext1: '上拉加载更多',
			loadtext2: '上拉加载更多',
			isloading1: false,
			isloading2: false,
			userId: 0
		};
	},
	computed: {
		dataList() {
			if (this.tarberIndex === 0) {
				return this.list1;
			} else {
				return this.list2;
			}
		},
		loadtext() {
			if (this.tarberIndex === 0) {
				return this.loadtext1;
			} else {
				return this.loadtext2;
			}
		}
	},
	onLoad(e) {
		const item = uni.getStorageSync('item');
		this.item = JSON.parse(item);
		const userinfo = uni.getStorageSync('userInfo');
		this.userId = userinfo.id;
		this.getData();
		uni.setNavigationBarTitle({
			title: this.item.title
		});
		uni.$on('followOrdosupport', (res) => {
			if (res.type === 'follow') {
				this.list1.forEach((item) => {
					if (item.userId === parseInt(res.userId)) {
						item.isFollow = res.num;
					}
				});
				this.list2.forEach((item) => {
					if (item.userId === parseInt(res.userId)) {
						item.isFollow = res.num;
					}
				});
			} else {
				this.dosupport({
					id: res.id,
					num: res.num
				});
			}
		});
	},
	onUnload() {
		uni.$off('followOrdosupport', (res) => {});
	},
	onReachBottom() {
		this.loadmore();
	},
	methods: {
		getData() {
			const no = this.tarberIndex + 1;
			if (this['isloading' + no]) {
				return;
			}
			let page = this['page' + no];

			getTopicPostList({
				id: this.item.id,
				current: page,
				isTime: this.tarberIndex === 0 ? false : true,
				userId: this.userId
			}).then((res) => {
				this['list' + no] = res.data.map((item) => {
					return {
						id: item.id,
						userId: item.userId,
						userpic: item.user.userpic,
						nikeName: item.user.nikeName,
						createTime: item.createTime,
						isFollow: item.isFollow,
						title: item.title,
						titlepic: item.titlepic,
						supportVo: item.supportVo,
						commentCount: item.commentCount,
						sharenum: item.sharenum
					};
				});
				this['isloading' + no] = true;
				if (res.data.length < 10) {
					this['loadtext' + no] = '没有更多了';
				} else {
					this['loadtext' + no] = '上拉加载更多';
					this['page' + no]++;
				}
			});
		},
		changeIndex(index) {
			if (this.tarberIndex === index) {
				return;
			}
			this.tarberIndex = index;
			this.getData();
		},
		// 上拉加载更多
		loadmore() {
			let index = this.tarberIndex;
			if (this['loadtext' + (index + 1)] !== '上拉加载更多') return;
			this['loadtext' + (index + 1)] = '加载中';
			let page = this['page' + (index + 1)];
			getTopicPostList({
				id: this.item.id,
				current: page,
				isTime: this.tarberIndex === 0 ? false : true,
				userId: this.userId
			}).then((res) => {
				let list = res.data.map((item) => {
					return {
						id: item.id,
						userId: item.userId,
						userpic: item.user.userpic,
						nikeName: item.user.nikeName,
						createTime: item.createTime,
						isFollow: item.isFollow,
						title: item.title,
						titlepic: item.titlepic,
						supportVo: item.supportVo,
						commentCount: item.commentCount,
						sharenum: item.sharenum
					};
				});
				this['list' + (index + 1)] = [...this['list' + (index + 1)], ...list];
				if (res.data.length < 10) {
					this['loadtext' + (index + 1)] = '没有更多了';
				} else {
					this['loadtext' + (index + 1)] = '上拉加载更多';
					this['page' + (index + 1)]++;
				}
			});
		},
		//顶踩
		dosupport(e) {
			let item = '';
			this.list1.forEach((v) => {
				if (v.id === e.id) {
					item = v;
				}
			});
			this.list2.forEach((v) => {
				if (v.id === e.id) {
					item = v;
				}
			});
			let msg = e.num === 1 ? '顶' : '踩';
			if (item.supportVo.userSupportType === e.num) {
				uni.showToast({
					title: '你已经' + msg + '过了',
					mask: true
				});
				return;
			}
			// 如果没有顶踩过，就直接++
			if (item.supportVo.userSupportType === null) {
				if (e.num === 1) {
					item.supportVo.support++;
				} else {
					item.supportVo.unSupportCount++;
				}
			}
			//如果顶过，现在又是踩
			else if (item.supportVo.userSupportType === 1 && e.num === 0) {
				item.supportVo.support--;
				item.supportVo.unSupportCount++;
			}
			//如果踩过，现在要顶
			else if (item.supportVo.userSupportType === 0 && e.num === 1) {
				item.supportVo.support++;
				item.supportVo.unSupportCount--;
			}
			item.supportVo.userSupportType = e.num;
			uni.showToast({
				title: msg,
				mask: true
			});
		}
	},
	components: {
		topicInfo,
		list,
		noThing
	}
};
</script>

<style>
.filter {
	filter: blur(10px);
}
</style>
